@import "../../$res/css/base.less";

body {
  padding: 0;
  margin: 0;
  background-color: @back_color;
}
.mynav {
  background-color: @fore_color;
  position: fixed;
}
.nav_null{
  height: 65px;
}

/*我的考勤页面*/
.me {
  .info {
    padding: 1rem 0rem 1rem 1rem;
    background-color: @fore_color;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-bottom: 1rem;
    img {
      .imgWidthHeigh(4.5rem);
      border-radius: 100%;
      margin-right: 1rem;
    }
    .rightinfo {
      margin-top: 1.1rem;
      .infoperson {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: baseline;
        padding-bottom: 0.6rem;
        p:nth-of-type(1) {
          font-size: 1.2rem;
          margin-right: 1rem;
          color: @font_color_nameblack;
        }
        p:nth-of-type(2) {
          font-size: 0.8rem;
          color: @font_color_titleblack;
        }
      }
      .infowork {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        .infowork_single {
          //border-right: 1px @line_gray solid;
          padding-right: 0.6rem;
          margin-left: 0.5rem;
          position: relative;
          .title {
            font-size: 9px;
            padding-bottom: 0.6rem;
            color: @font_color_smallgray;
          }
          .content {
            font-size: 0.9rem;
            padding-bottom: 0.1rem;
            color: @font_color_green;
          }
          .contentwarm{
            color:@font_color_exception;
          }
        }
        .infowork_single::after {
          content: " ";
          position: absolute;
          right: 0;
          top: 0;
          width: 1px;
          bottom: 0;
          border-right: 1px solid @line_me_vertical;
          color: @line_me_vertical;
          -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
          -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
        }
        .infowork_single:first-child {
          margin-left: 0;
        }
        .infowork_single:last-child::after {
          border-right: none;
        }
      }
    }
  }
  .info::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .calendar {
    background-color: @fore_color;
    position: relative;
    .year {
      position: relative;
      padding: 0.5rem 0rem 0.5rem 1rem;
      color: @font_color_titleblack;
      font-size: 1.2rem;
      .myflex(center);
      span:nth-of-type(1){

      }
      span:nth-of-type(2){
        font-size: 1rem;
        text-align: right;
        .myflex_wight;
      }
      span:nth-of-type(2):active{
        color:black;
      }
      img{
        width: 0.5rem;
        margin-left: 0.3rem;
        margin-right: 1rem;
      }
    }
    .year::before{
      .mybefor;
    }
    .year::after {
      .myafter;
    }
    .weekDay {
      padding: 0.5rem 0;
      .rest {
        color: @font-color_rest;
      }
      .week {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        span {
          text-align: center;
          flex: 1;

        }
      }
      .day {
        margin-top: 0.5rem;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        span {
          text-align: center;
          flex: 1;
          font-size: 1.2rem;
        }
        .trans_ring{
          color: @font_color_white;
          border-radius: 100%;
          height: 2.5rem;
          width: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          border:1px solid @font_buqian_gray;
          margin: 0 auto;
        }
        .singleday_ring{
          color: @font-color_rest;
          border-radius: 100%;
          height: 2.5rem;
          width: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          border:1px solid @font-color_rest;
          margin: 0 auto;
        }
        .singleday {
          color:@font-color_rest;
          height: 2rem;
          width: 2rem;
          line-height: 2rem;
          text-align: center;
          margin: 0.25rem auto 0;
          border-radius: 100%;
        }
        .singleday:active{
          background-color: #f8f8fa;
        }
        .wrong_ring{
          color: @font_color_white;
          border-radius: 100%;
          height: 2.5rem;
          width: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          border:1px solid @heighlight_red;
          margin: 0 auto;
        }
        .wrong {
          background-color: @heighlight_red;
          color: @font_color_white;
          border-radius: 100%;
          height: 2rem;
          width: 2rem;
          line-height: 2rem;
          text-align: center;
          margin: 0.25rem auto 0;
        }
        .wrong:active{
          background-color: #E6433F;
        }
        .ok_ring{
          color: @font_color_white;
          border-radius: 100%;
          height: 2.5rem;
          width: 2.5rem;
          line-height: 2.5rem;
          text-align: center;
          border:1px solid #6bd66a;
          margin: 0 auto;
        }
        .ok{
          background-color: #6bd66a;
          color: @font_color_white;
          border-radius: 100%;
          height: 2rem;
          width: 2rem;
          line-height: 2rem;
          text-align: center;
          margin: 0.25rem auto 0;
        }
        .ok:active{
          background-color: #086706;
        }
        .today {
          border: 1px @font_color_green solid;
          border-radius: 100%;
          height: 2rem;
          width: 2rem;
          line-height: 2rem;
          text-align: center;
          margin: 0 auto;
        }
      }
    }
  }
  .work {
    padding: 0rem 0rem 0 1rem;
    background-color: @fore_color;
    position: relative;

    .registlist {
      .regist {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        position: relative;
        padding: 0.5rem 0;
        img {
          .imgWidthHeigh(2rem);
          margin-right: 1rem;
        }
        span:nth-of-type(1) {
          flex: 1;
          color: @font_color_titleblack;
        }
        span:nth-of-type(2) {
          color: @font_color_smallgray;
          margin-right: 1rem;
        }
        .buqian {
          border: 1px solid @font_color_green;
          color: @font_color_green;
          width: 4.5rem;
          text-align: center;
          border-radius: 5px;
          padding: 0.1rem 0;
          margin-right: 1rem;
        }
        .buqian:active{
          background-color: @font_color_green;
          color: @font_color_white;
        }
      }
      .regist::before {
        .mybefor;
      }

    }
  }
  .work::before{
    .mybefor;
  }
  .more {
    position: relative;
    text-align: center;
    color: @font_color_smallgray;
    background-color: @fore_color;
    .conten {
      display: block;
      align-items: center;
      height: 2.7rem;
      span {
        margin-right: 0.5rem;
        height: 2.7rem;
        line-height: 2.7rem;
      }
      img {
        height: 0.8rem;
        line-height: 0.8rem;
        width: 0.5rem;
        margin-top: 0.1rem;

      }
    }

  }
  .more:active{
    background-color: @back_color;
  }
  .more::before{
    .mybefor;
  }
  .more::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

/*全部考勤页面*/
.all{
  .my-search-bar{
    display: none;
  }
  .mylist{
    background-color: @fore_color;
    margin-top: 0.5rem;
    position: relative;
    .mylistItem{
      position: relative;
      .title{
        padding: 0.6rem 1rem;
        display: flex;
        align-items: center;
        img{
          .imgWidthHeigh(0.5rem);
          margin-right: 1rem;
        }
        span:nth-of-type(1){
          color:@font_color_nameblack;
          flex: 1;
        }
        span:nth-of-type(2){
          color: @font_color_smallgray;
        }
      }
      .title:active{
        background-color: @back_color;
      }
      .mylist_content{
        .mylist_con_item{
          .myflex(center);
          padding:0rem 0rem 0rem 1rem;
          position: relative;
          img{
            .imgWidthHeigh(3rem);
            border-radius: 100%;
            margin-right: 1rem;
          }
          .mess{
            .myflex(center);
            .myflex_wight;
            position: relative;
            padding:1rem 1rem 1rem 0;
            .left{
              span{
                width:5rem;
                @font_color_nameblack;
              }
              .myflex_wight;
              .myflex(center);
              .left_add{
                margin-left: 1rem;
                color: @font_color_smallgray;
                font-size: 0.9rem;
              }
            }
            .right{
              color: @font_color_white;
              border-radius: 15px;
              background-color: @font_color_green;
              font-size: 0.9rem;
              padding: 0 0.7rem;
              .vertical_middle(1.5rem);
            }
            .right_rest{
              color: @font_color_white;
              border-radius: 15px;
              background-color: @capsule;
              font-size: 0.9rem;
              padding: 0 0.7rem;
              .vertical_middle(1.5rem);
            }
            .right_nocapsule{
              font-size: 1rem;
              color:@font_color_smallgray;
            }
          }
          .mess:last-child::after{
            //border-bottom: none;
          }
        }
        .mylist_con_item::after{
          content: " ";
          position: absolute;
          left: 5rem;
          bottom: 0;
          right: 0;
          height: 1px;
          border-bottom: 1px solid #D9D9D9;
          color: #D9D9D9;
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
          -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
        }
        .mylist_con_item:last-child::after{
          border-bottom: 0;
        }
      }
      .mylist_content a:active{
        background-color: @back_color;
      }
      .mylist_content a span{
        color: @font_color_nameblack;
      }
    }
    .mylistItem:after{
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .mylist::before{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

/*原始记录页面*/
.yuanshi {
  .timeline {
    padding: 1rem 1rem;
    .today{
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      height: 1rem;
      line-height: 1rem;
      .point{
        border-radius: 100%;
        background-color: #b1b1b1;
        height: 0.5rem;
        width: 0.5rem;
        margin-left: 0.62rem;
        margin-right: 1.2rem;
      }
      .today_time{
        color: @font_color_smallgray;
        font-size: 0.8rem;
      }
    }
    .item {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding-top: 0.5rem;
      align-items: flex-start;
      position: relative;
      img {
        .imgWidthHeigh(1.8rem);
      }
      .workinfo {
        background-color: @fore_color;
        margin-left: 0.5rem;
        padding: 0.5rem 0.7rem;
        flex: 1;
        border-radius: 5px;
        .lineone {
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          padding-bottom: 0.4rem;
          color: @font_color_smallgray;
          .lineone_check {
            font-size: 0.8rem;
          }
          .lineone_time {
            color: @font_color_green;
            font-size: 0.8rem;
            margin-left: 0.5rem;
          }
          .lineone_totaltime{
            flex: 1;
            text-align: right;
            font-size: 0.8rem;
          }
          span {
            font-size: 0.7rem;
            margin-right: 1rem;
          }
        }
        .lineone:last-child{
          padding-bottom: 0;
        }
      }
      .line{
        position:absolute;
        top:-0.5rem;
        left:0.9rem;
        height: 5rem;
        background-color: @line_yuanshi_timeline;
        width: 1px;
        z-index: -1;
      }
    }
  }
}

/*数据统计页面*/
.tongji{
  .top{
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    .top_item{
      flex: 1;
      text-align: center;
      background-color: @fore_color;
      padding:1rem 0;
      position: relative;
      img{
        .imgWidthHeigh(2.5rem);
      }
      .top_item_test{
        text-align: center;
        color:@font_color_nameblack;
      }
    }
    .top_item:active{
      background-color: @back_color;
    }
    .top_item:after{
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .mylist{
    position: relative;
    background-color: @fore_color;
    margin-top: 1rem;
    .listItem{
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      disply:flex;
      align-items: center;
        img{
          .imgWidthHeigh(1.2rem);
          margin-right: 1rem;
          margin-left: 1rem;
        }

      .itemCotent{
        display: flex;
        flex: 1;
        align-items: center;
        position: relative;
        padding: 0.8rem 1rem 0.8rem 0;
        span{
          color:@font_color_nameblack;
        }
        .contentIcon{
          flex: 1;
          text-align: right;
          img{
            width: 0.5rem;
            height: 0.8rem;
            margin-left: 0;
            margin-right: 0;
          }
        }
      }
      .itemCotent::after{
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
      }
    }
    .listItem:active{
      background-color: @back_color;
    }
  }
  .mylist::before{
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .mylist::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

.me_all{
  .month_week{
    background-color: @fore_color;
    margin-top: 0.5rem;
    .myflex(center);
    padding:1rem;
    position: relative;
    .left{
      .myflex(center);
      .myflex_wight;
      p:nth-of-type(1){
        color:@font_color_smallgray;
      }
      img{
        .imgWidthHeigh(0.3rem);
        margin:0 0.5rem;
      }
      p:nth-of-type(2){
        color:@font_color_titleblack;
      }
    }
    .right{
      text-align: right;
      border:1px solid @font_color_titleblack;
      .myflex(center);
      width: 6rem;
      .month{
        .myflex_wight;
        background-color: @font_color_titleblack;
        text-align: center;
        color: @font_color_white;
      }
      .week{
        .myflex_wight;
        text-align: center;
        color: @font_color_titleblack;
      }
    }
  }
  .month_week:after{
    .myafter;
  }
  .month_week_detail{
    padding: 2rem 1rem;
    background-color: @fore_color;
    .myflex(flex-start);
    .left{
      .myflex_wight;
      p{
        color:@font_color_smallgray
      }
      .totaltime{
        .myflex(center);
        margin: 0.6rem 0;
        .number{
          font-size: 2rem;
          color: @font_color_green;
        }
        .myfont{
          font-size: 1rem;
          color: @font_color_green;
        }
      }
      .single_day{
        .myflex(center);
        img{
          .imgWidthHeigh(1rem);
          margin-right: 0.3rem;
        }
        p:nth-of-type(1){
          color:@font_color_smallgray;
          margin-right: 0.3rem;
        }
        p:nth-of-type(2){
          color: @font_color_nameblack;
        }
      }
    }
    .right{
      text-align: right;
      p{
        color:@font_color_smallgray
      }
      .number{
        font-size: 1.5rem;
        color: @font_color_green;
      }
    }
  }

  .timeline {
    padding: 0rem 1rem;
    .today{
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      height: 1rem;
      line-height: 1rem;
      margin-top: 0.5rem;
      .point{
        border-radius: 100%;
        background-color: #b1b1b1;
        height: 0.5rem;
        width: 0.5rem;
        margin-left: 0.62rem;
        margin-right: 1.2rem;
      }
      .today_time{
        color: @font_color_smallgray;
        font-size: 0.8rem;
      }
    }
    .item {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding-top: 0.5rem;
      align-items: flex-start;
      position: relative;
      img {
        .imgWidthHeigh(1.8rem);
      }
      .workinfo {
        background-color: @fore_color;
        margin-left: 0.5rem;
        padding: 0.5rem 0.7rem;
        flex: 1;
        border-radius: 5px;
        .lineone {
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          align-items: center;
          padding-bottom: 0.4rem;
          color: @font_color_smallgray;
          .lineone_check {
            font-size: 0.8rem;
          }
          .lineone_time {
            color: @font_color_green;
            font-size: 0.8rem;
            margin-left: 0.5rem;
          }
          .lineone_totaltime{
            flex: 1;
            text-align: right;
            font-size: 0.8rem;
          }
          span {
            font-size: 0.7rem;
            margin-right: 1rem;
          }
        }
        .lineone:last-child{
          padding-bottom: 0;
        }
      }
      .line{
        position:absolute;
        top:-0.5rem;
        left:0.9rem;
        height: 5rem;
        background-color: @line_yuanshi_timeline;
        width: 1px;
        z-index: -1;
      }
    }
  }
}

/*无数据时提示页面*/
.no_con {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-flex-direction: column;
  flex-direction: column;

  .conNull{
    width: 100%;
    height: 40px;

  }
  img {
    width: 200px;
    height: 200px;
    margin-top: 50px;
  }
  p {
    margin-top: 20px;
    width: 100%;
    color: @font_color_white;
    text-align: center;
    font-size: 16px;
    color:@font_color_titleblack;

  }
}
